CSS text-orientation: Vertikalaus teksto valdymo įgūdžiai globaliam tinklalapių dizainui

Tinklalapių dizaino pasaulyje tipografija atlieka lemiamą vaidmenį perteikiant informaciją ir kuriant vizualiai patrauklius maketus. Nors horizontalus tekstas yra standartas daugelyje kalbų, galimybė valdyti teksto orientaciją tampa būtina dirbant su kalbomis, kurios tradiciškai naudoja vertikalius rašmenis, arba kuriant unikalius dizaino elementus. CSS text-orientation savybė suteikia galingus įrankius šiam valdymui pasiekti, leidžiančius kūrėjams sukurti išties internacionalizuotas ir vizualiai patrauklias interneto patirtis.

text-orientation savybės supratimas

CSS text-orientation savybė valdo teksto simbolių orientaciją eilutėje. Ji daugiausiai veikia simbolius vertikalaus rašymo režimuose (pvz., kai naudojama su writing-mode: vertical-rl arba writing-mode: vertical-lr), tačiau tam tikromis reikšmėmis gali turėti įtakos ir horizontaliam tekstui.

Pagrindinės reikšmės

• mixed: Tai pradinė reikšmė. Ji pasuka simbolius, kurie natūraliai yra horizontalūs (pvz., lotyniški simboliai), 90° pagal laikrodžio rodyklę. Simboliai, kurie natūraliai yra vertikalūs (pvz., daugelis CJK simbolių), lieka statūs. Tai dažnai yra pageidaujamas elgesys maišant horizontalų ir vertikalų tekstą.
• upright: Ši reikšmė priverčia visus simbolius rodyti stačiai, nepriklausomai nuo jų prigimtinės orientacijos. Horizontalūs simboliai atvaizduojami taip, lyg jie būtų horizontalaus rašymo režime. Tai naudinga, kai norite priverstinai visus simbolius rodyti vertikaliai be pasukimo.
• sideways: Ši reikšmė pasuka visus simbolius 90° pagal laikrodžio rodyklę. Funkcionaliai ji panaši į mixed lotyniškiems simboliams, tačiau ji taip pat pasuks ir vertikalius simbolius. Ši reikšmė yra pasenusi ir rekomenduojama naudoti `sideways-right` bei `sideways-left`.
• sideways-right: Pasuka visus simbolius 90° pagal laikrodžio rodyklę. Tai užtikrina nuoseklią simbolių orientaciją, kuri gali būti labai svarbi tam tikroms dizaino estetikoms ar prieinamumo reikalavimams.
• sideways-left: Pasuka visus simbolius 90° prieš laikrodžio rodyklę.
• use-glyph-orientation: Ši reikšmė yra pasenusi. Anksčiau ji nurodydavo, kad orientacija turėtų būti nustatoma pagal glifo įterptą orientacijos informaciją (dažniausiai randamą SVG šriftuose).

Praktiniai pavyzdžiai: Vertikalaus teksto įgyvendinimas

Norėdami iliustruoti text-orientation naudojimą, apsvarstykime paprastą pavyzdį:

            
.vertical-text {
  writing-mode: vertical-rl; /* or vertical-lr */
  text-orientation: upright;
}

            

              
                Copy
              
            
          

Ši CSS taisyklė atvaizduos tekstą bet kuriame elemente su klase vertical-text vertikaliai, visiems simboliams esant stačiai. Jei pakeisime text-orientation į mixed:

            
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

            

              
                Copy
              
            
          

Lotyniški simboliai bus pasukti 90° pagal laikrodžio rodyklę, o vertikalūs simboliai liks statūs. Pasirinkimas tarp upright ir mixed priklauso nuo norimo vizualinio efekto ir tekste esančių simbolių derinio.

Globalūs aspektai ir kalbų palaikymas

text-orientation savybė yra ypač svarbi kalboms, kurios tradiciškai naudoja vertikalias rašymo sistemas, pavyzdžiui:

• Kinų: Nors šiuolaikinėje kinų kalboje dažnai naudojamas horizontalus tekstas, vertikalus rašymas vis dar naudojamas tam tikruose kontekstuose, pavyzdžiui, tradicinėse knygose, ženkluose ir meniniuose dizainuose.
• Japonų: Japonų kalba gali būti rašoma tiek horizontaliai, tiek vertikaliai. Vertikalus rašymas yra įprastas romanuose, laikraščiuose ir manga komiksuose.
• Korėjiečių: Panašiai kaip kinų ir japonų kalbos, korėjiečių kalba taip pat palaiko tiek horizontalų, tiek vertikalų rašymą.
• Mongolų: Tradicinis mongolų raštas rašomas vertikaliai.

Kuriant dizainą šioms kalboms, labai svarbu naudoti text-orientation kartu su writing-mode savybe, kad tekstas būtų atvaizduojamas teisingai ir įskaitomai. Renkantis tarp `upright` ir `mixed` orientacijų, atsižvelkite į kultūrinį kontekstą ir numatomą auditoriją.

Pavyzdžiui, japonų kalboje, naudojant text-orientation: upright su writing-mode: vertical-rl, visi simboliai bus rodomi vertikaliai be pasukimo, kas dažnai yra pageidaujamas stilius. Naudojant text-orientation: mixed, lotyniški simboliai bus pasukti, kas gali būti tinkama kai kuriuose dizainuose, bet ne kituose. Taip pat svarbu atkreipti dėmesį į CSS `direction` savybę, nes ji kartu su `writing-mode` gali paveikti atvaizdavimo kryptį.

Pažangios technikos ir naudojimo atvejai

Vertikalių navigacijos meniu kūrimas

Vienas iš dažniausių text-orientation naudojimo atvejų yra vertikalių navigacijos meniu kūrimas. Derindami writing-mode ir text-orientation, galite lengvai sukurti vizualiai įspūdingus meniu, kurie išsiskiria iš tradicinių horizontalių meniu.

            


            

              
                Copy
              
            
          

            
.vertical-nav {
  width: 50px; /* Adjust as needed */
}

.vertical-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vertical-nav li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
  writing-mode: vertical-rl;
  text-orientation: upright;
  transition: background-color 0.3s ease;
}

.vertical-nav li a:hover {
  background-color: #f0f0f0;
}

            

              
                Copy
              
            
          

Šis pavyzdys sukuria paprastą vertikalų navigacijos meniu su vertikaliai rodomomis nuorodomis. flex-direction: column užtikrina, kad sąrašo elementai būtų išdėstyti vertikaliai, o text-orientation: upright išlaiko tekstą statų. Plotį, atitraukimus ir spalvas galima koreguoti, kad atitiktų bendrą dizainą.

Vertikalus tekstas antraštėse ir pavadinimuose

text-orientation taip pat gali būti naudojamas kuriant vizualiai įdomias antraštes ir pavadinimus. Pavyzdžiui, galite naudoti vertikalų tekstą šoninėje juostoje arba kaip dekoratyvinį elementą puslapyje.

            

  
Vertical Title


            

              
                Copy
              
            
          

            
.vertical-heading {
  writing-mode: vertical-rl;
  text-orientation: mixed; /* Or upright, depending on the desired effect */
  margin-bottom: 20px;
}

            

              
                Copy
              
            
          

Šis pavyzdys atvaizduoja h1 elementą vertikaliai. Pasirinkimas tarp mixed ir upright priklausys nuo to, ar norite, kad lotyniški simboliai būtų pasukti.

Derinimas su kitomis CSS savybėmis

text-orientation savybę galima derinti su kitomis CSS savybėmis, kad būtų sukurti dar sudėtingesni efektai. Pavyzdžiui, galite naudoti transform: rotate(), kad pasuktumėte visą vertikalaus teksto bloką kampu.

            
.rotated-vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  transform: rotate(-90deg); /* Rotate counter-clockwise */
}

            

              
                Copy
              
            
          

Tai pasuks visą vertikalaus teksto bloką 90 laipsnių prieš laikrodžio rodyklę. Eksperimentuokite su skirtingais pasukimo kampais ir kitomis CSS savybėmis, kad pasiektumėte unikalius ir vizualiai patrauklius dizainus.

Prieinamumo aspektai

Naudojant text-orientation, labai svarbu atsižvelgti į prieinamumą. Užtikrinkite, kad tekstas išliktų įskaitomas ir suprantamas visiems vartotojams, įskaitant tuos, kurie turi negalią. Štai keletas pagrindinių aspektų:

• Pakankamas kontrastas: Užtikrinkite, kad tarp teksto ir fono spalvos būtų pakankamas kontrastas. Tai ypač svarbu vertikaliam tekstui, nes jį gali būti sunkiau skaityti nei horizontalų tekstą. Naudokite įrankius, tokius kaip „WebAIM Contrast Checker“, kad patikrintumėte kontrasto santykius.
• Šrifto dydis: Naudokite tinkamą, lengvai skaitomą šrifto dydį. Venkite pernelyg mažų šrifto dydžių, ypač vertikaliam tekstui. Leiskite vartotojams prireikus koreguoti šrifto dydį.
• Eilutės aukštis ir tarpai tarp raidžių: Koreguokite eilutės aukštį (line-height) ir tarpus tarp raidžių (letter-spacing), kad pagerintumėte skaitomumą. Vertikaliam tekstui gali prireikti kitokių eilutės aukščio ir tarpų tarp raidžių reikšmių nei horizontaliam tekstui.
• Suderinamumas su ekrano skaitytuvais: Išbandykite vertikalų tekstą su ekrano skaitytuvais, kad įsitikintumėte, jog jis tinkamai perskaitomas. Ekrano skaitytuvai ne visada gali teisingai apdoroti vertikalų tekstą, todėl svarbu patikrinti, ar turinys yra prieinamas.
• Naršymas klaviatūra: Užtikrinkite, kad naršymas klaviatūra su vertikaliu tekstu veiktų tinkamai. Vartotojai turėtų galėti naršyti po turinį naudodamiesi klaviatūra be jokių problemų.
• Naudokite semantinį HTML: Naudokite tinkamus semantinius HTML elementus turiniui struktūrizuoti. Tai padeda ekrano skaitytuvams suprasti turinį ir suteikia geresnę vartotojo patirtį. Pavyzdžiui, naudokite <nav> navigacijos meniu ir <article> pagrindinėms turinio dalims.

Suderinamumas su naršyklėmis

text-orientation savybė turi gerą suderinamumą su šiuolaikinėmis naršyklėmis. Tačiau visada gera praktika yra išbandyti savo dizainą skirtingose naršyklėse, kad įsitikintumėte, jog jis atvaizduojamas teisingai. Apsvarstykite galimybę naudoti naršyklių prefiksus (nors šiais laikais jie dažniausiai nereikalingi), jei reikia palaikyti senesnes naršykles.

Štai bendra naršyklių palaikymo apžvalga:

• Chrome: Palaikoma.
• Firefox: Palaikoma.
• Safari: Palaikoma.
• Edge: Palaikoma.
• Internet Explorer: Dalinis palaikymas, gali prireikti prefiksų ar „polyfills“ pilnam funkcionalumui. Apsvarstykite galimybę vengti vertikalaus teksto senesnėse IE versijose.

Naudokite įrankius, tokius kaip „Can I Use“ (caniuse.com), kad patikrintumėte naujausią informaciją apie text-orientation ir kitų CSS savybių suderinamumą su naršyklėmis.

Gerosios praktikos naudojant text-orientation

• Naudokite su writing-mode: Visada naudokite text-orientation kartu su writing-mode savybe, kad užtikrintumėte teisingą teksto atvaizdavimą.
• Atsižvelkite į kalbą ir kultūrą: Renkantis tarp upright ir mixed, atsižvelkite į kalbą ir kultūrinį kontekstą.
• Tikrinkite prieinamumą: Visada tikrinkite savo dizaino prieinamumą, kad užtikrintumėte, jog jis yra naudojamas visiems vartotojams.
• Išlaikykite skaitomumą: Užtikrinkite, kad tekstas išliktų įskaitomas ir lengvai skaitomas, net kai jis atvaizduojamas vertikaliai.
• Naudokite saikingai: Naudokite vertikalų tekstą saikingai ir strategiškai, kad pagerintumėte savo dizaino vizualinį patrauklumą. Pernelyg gausus vertikalaus teksto naudojimas gali apsunkinti turinio skaitymą ir pakenkti bendrai vartotojo patirčiai.

Išvada

text-orientation savybė yra galingas įrankis teksto orientacijai valdyti tinklalapių dizaine. Suprasdami jos skirtingas reikšmes ir kaip ją naudoti kartu su writing-mode savybe, galite sukurti vizualiai patrauklias ir internacionalizuotas interneto patirtis, kurios atitinka įvairias kalbas ir dizaino estetikas. Nepamirškite atsižvelgti į prieinamumą ir suderinamumą su naršyklėmis, kad jūsų dizainas būtų prieinamas visiems vartotojams.

Įvaldę vertikalaus teksto valdymo meną su CSS, galite atverti naujas galimybes kūrybiškam ir įtraukiančiam tinklalapių dizainui, padarydami savo svetaines išsiskiriančias globalioje skaitmeninėje erdvėje.